<template>
    <div class="tab-container">
        <el-table :data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit
            highlight-current-row style="width: 100%">
            <el-table-column prop="node_count" label="数量"></el-table-column>
            <el-table-column prop="node_type" label="种类"></el-table-column>
        </el-table>

        <el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pvData.length">
        </el-pagination>


    </div>
    
</template>
<script>
//调用接口

export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页
            pagesize: 5, //    每页的数据
            total: 0,
            pvData: [
                {
                "node_count": "2597",
                "node_type": "\ufeff\u81ea\u7136\u4eba"
                }
            ]

        };
    },
    created()
    {
    this.get();
    console.log("1");
    },
    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage); //点击第几页
        },
        get: function(){
            this.$http.get('http://10.77.50.193:50001/getGraphMetaData').then((res)=>
            {
                console.log(res);
                this.pvData = res.nodeMeta;
            })
        },
    },
};
</script>
<style scoped>
.tab-container {
    margin: 30px;
}
</style>